<template>
    <div class="app-container" v-if="true">
        <div class="panel-wrap" v-if="showEchars ">
            <template v-for="(item,index) in includeList">
                <div class="filter-container" v-if="searchConfig[item.unitId]">
                    <template v-for="(config,index) in searchConfig[item.unitId]">
                        <custom-input :key="config.key" :label="config.fieldName" :config="config"  v-model="listQuery[item.unitId][config.linkField]"
                                      v-if="['Input'].includes(config.filterComType)"></custom-input>
                        <custom-select :key="config.key" :label="config.fieldName" :config="config" v-model="listQuery[item.unitId][config.linkField]"
                                       v-if="['Select'].includes(config.filterComType)"></custom-select>
                        <custom-date :key="config.key" :label="config.fieldName" :config="config" v-model="listQuery[item.unitId][config.linkField]"
                                     v-if="['DatePicker'].includes(config.filterComType)"></custom-date>
                    </template>
                    <div class="ml10">
                        <el-button type="primary" icon="el-icon-search" size="medium" @click="handleFilter(item.unitId)">搜索</el-button>
                    </div>
                </div>
                <component :is="item.unitCom" :option="item" :key="item.key" :params="listQuery[item.unitId]" v-if="showArr[item.unitId]" />
            </template>
        </div>
    </div>
    <div class="component-parent" v-else>
        <template v-for="(item,index) in includeList">
            <vue-draggable-resizable v-if="item.unitId"
                                     :class="{'my-com':true,'preview':!isEdit,'max':!!item.max}"
                                     :key="item.unitId"
                                     :w=parseInt(item.width||200)
                                     :h=parseInt(item.length||200)
                                     :x=parseInt(item.haxis||0)
                                     :y=parseInt(item.vaxis||0)
                                     :scroll-sensitivity="150"
                                     :force-fallback="false"
                                     :min-width="200"
                                     :min-height="200"
                                     :snapTolerance="10"
                                     :draggable="false"
                                     :resizable="false"
                                     :snap="true"
                                     :parent="true"
                                     :isConflictCheck="false">
                <component :is="item.unitCom" :option="item" :key="item.key" :params="listQuery[item.unitId]" v-if="showArr[item.unitId]" />
            </vue-draggable-resizable>
        </template>
    </div>
</template>

<script>
    //仪表盘相关组件start
    import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
    import CommonComponent from '../panel/templateConfig/commoncompents/CommonComponent'
    import NumMultipleComponent from '@/components/fliterComponent/NumMultipleComponent'
    import CustomInput from "./components/customInput";
    import CustomSelect from "./components/customSelect";
    import CustomDate from "./components/customDate";
    import TemplateIndex from "../panel/templateConfig/TemplateIndex";
    import Grid from '@/views/commonView/Grid'
    import {QUERY_PANEL_INFO,getModelCol} from '@api/url'
    import ajax from '@/api/ajax'
    import Vue from 'vue'
    Vue.component('Grid', Grid)
    export default {
        components: {TemplateIndex, CustomDate, CustomSelect, CustomInput, NumMultipleComponent, CommonComponent,VueDraggableResizable},
        data() {
            return {
                showEchars: false,
                includeList: [],
                boardId: '',//仪表盘id
                filterList: [],
                searchConfig: {},
                total: 0,
                listQuery: {},
                showArr:{},//用来处理搜索问题

            }
        },
        watch: {
            '$route': {
                immediate: false,
                handler(newVal, oldVal) {
                    this.boardId = this.$route.query.id;
                    this.pageInit();
                }
            }
        },
        mounted() {
            this.boardId = this.$route.query.id;
            this.pageInit();
        },
        methods: {
            getConditionConfig(arr=[]){
                arr.forEach(item=>{
                    this.$set(this.listQuery,item.unitId, {});
                    this.$set(this.showArr,item.unitId, true);
                    ajax.post(getModelCol, {
                        modelId:item.unitId,
                    }).then(res => {//查询仪表盘
                        let data =res.data.formula;
                        if(data){
                            let key=item.unitId+''
                            this.searchConfig[key]=JSON.parse(data);
                            this.$forceUpdate();
                        }
                    })
                })

            },
            pageInit() {//页面初始化调用方法
                let param = {
                    boardId: this.boardId
                };

                this.showEchars = false;
                const loading = this.$loading({
                    lock: true,
                    text: `数据加载中...`,
                    spinner: 'el-icon-loading',
                    background: 'rgba(144,144,144,0.7)'
                });
                console.log(param);
                const includeList = []
                const filterComponents = [];
                ajax.post(QUERY_PANEL_INFO, param).then(res => {//查询仪表盘
                    res.data.forEach(item => {
                        if (item.unitType === '1') {
                            item.openItem = false
                            item.hoverCard = false
                            // 坐标未定义则默认0，坐标小于0，也是0
                            item.haxis = item.haxis ? item.haxis < 0 ? 0 : item.haxis : 0;
                            item.vaxis = item.vaxis ? item.vaxis < 0 ? 0 : item.vaxis : 0;
                            item.showFilter = false
                            includeList.push(item)
                        } else if (item.unitType === '2') {
                            filterComponents.push(item)
                        }
                    })
                    this.includeList = includeList.map(item => {
                        item.filtCom = filterComponents.filter(fItem => fItem.ctlUnit === item.unitId)
                        return item;
                    })
                    this.filterList = filterComponents;
                    this.getConditionConfig(this.includeList);
                }).finally(() => {
                    loading.close()
                    this.showEchars = true;
                })
            },
            handleFilter(unitId) {
                this.showArr[unitId]=false;
                this.$nextTick(()=>{
                    this.showArr[unitId]=true;
                })
            },
        }
    };
</script>

<style scoped lang="stylus">
    .app-container {
        padding 10px;
    }

    .filter-container {
        display: flex
        margin-bottom 10px
        flex-wrap wrap
        .label {
            margin-left 6px
        }

        .filter-input {
            width 240px
            margin-bottom 10px
        }
    }
    .component-parent {
        background-color: #1D2C56;
        position relative
        width: 2000px;
        height: 2000px;
        overflow auto
        .vdr {
            border: 1px dashed transparent!important;
        }
    }

</style>
